<template>
	<view class="content">
		<view class="status-bar">
			<view class="iconfont icon-fanhui"></view>
			<view class="iconfont icon-gengduo"></view>
		</view>
		<view class="bg-view" :style="{'background-image':'url('+ friendInfo.avatarUrl +')'}">
			<view class="fillter-view" :class="addFriendStatus ? 'add-friend' : ''"></view>
		</view>
		<view class="container">
			<view class="avatar-img" :class="addFriendStatus ? 'add-friend' : ''">
				<image :src="friendInfo.avatarUrl" mode="widthFix"></image>
				<view class="sexicon iconfont icon-nv"></view>
			</view>
			<view class="nickname" :class="addFriendStatus ? 'add-friend' : ''">{{friendInfo.nickName}}</view>
			<view class="motto-text" :class="addFriendStatus ? 'add-friend' : ''">{{friendInfo.motto}}</view>
			<view class="info-wrap">
				<view class="info-item">
					<view class="iconfont icon-gerenzhongxin"></view>
					<view>{{friendInfo.nickName}}</view>
				</view>
				<view class="info-item">
					<view class="iconfont icon-id"></view>
					<view>{{friendInfo.uid}}</view>
				</view>
				<view class="info-item" v-if="friendInfo.schoolName">
					<view class="iconfont icon-xuexiao"></view>
					<view>{{friendInfo.schoolName}}</view>
				</view>
				<view class="info-item" v-if="friendInfo.userAddress && friendInfo.userAddress != '-'">
					<view class="iconfont icon-zhuzhi_chengshi"></view>
					<view>{{friendInfo.userAddress}}</view>
				</view>
			</view>
			<view class="add-btn" v-if="!addFriendStatus" @click="toAddFriend">添加好友</view>
			<!-- <view class="add-friend-wrap animated fadeInUp" :class="addFriendStatus ? '':'fadeOutDown'" > -->
			<view class="add-friend-wrap" :class="addFriendStatus ? 'add-friend' : ''" >
				<view class="add-friend-hint">填写验证信息</view>
				<view class="input-area">
					<textarea :placeholder="$store.user.nickName + '请求加你为好友~'" v-model="authMessage"/>
				</view>
				<view class="add-friend-hint">填写好友备注</view>
				<view class="add-friend-name">
					<input type="text" placeholder="填写好友备注~" v-model="friendName"/>
				</view>
				<view class="add-friend-btns-wrap">
					<view class="cancel-btn" @click="cancelAdd">取消</view>
					<view class="confirm-btn" @click="addFriend">发送</view>
				</view>
			</view>
		</view>
		<mpopup ref="mpopup" :isdistance="true"></mpopup>  
	</view>
</template>

<script>
	import {Friend} from '@/model/friend.js';
	import {User} from "@/model/user.js";
	import mpopup from '@/components/xuan-popup/xuan-popup.vue'
	export default {
		data() {
			return {
				addFriendStatus: false,
				friendInfo:{},
				friendName:'',
				authMessage:''
			}
		},
		components:{
			mpopup
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('acceptDataFromOpenerPage', async uid => {
				console.log(uid)
				let res = await User.getUserInfo({uid})
				this.friendInfo = res.data
				this.friendName = this.friendInfo.nickName
			})
			this.userInfo = this.$store.user
		},
		methods: {
			toAddFriend(){
				this.addFriendStatus = true
			},
			cancelAdd(){
				this.addFriendStatus = false
			},
			async addFriend(){
				let authMessage = this.authMessage
				if(authMessage == '' || !authMessage){
					authMessage  = `${this.$store.user.nickName}请求添加你为好友~`
				}
				let friendName = this.friendName
				if(friendName == '' || !friendName){
					friendName = this.friendInfo.nickName
				}
				let res = await Friend.addFriend({
						friendId:this.friendInfo.uid,
						friendNickname:this.friendInfo.nickName,
						friendName:this.friendName,
						authMessage:authMessage
					})
				if(res.code != 200){
					this.$refs.mpopup.open({
						type:'err',
						content:res.message,
						timeout:2000,
						isClick:false
					});
					return
				}
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		// padding-top: var(--status-bar-height);
		box-sizing: border-box;
		.status-bar{
			position: relative;
			top: var(--status-bar-height);
			left: 0;
			width: 100%;
			z-index: 10;
			display: flex;
			justify-content: space-between;
			view{
				margin: 20rpx;
				font-size: 40rpx;
				&:last-child{
					margin-right: 40rpx;
					font-size: 50rpx;
				}
			}
		}
		.bg-view{
			height: 110vh;
			width: 110vw;
			position: absolute;
			top: -50rpx;
			left: -50rpx;
			background-image: url(../../static/testImg/avatrjpg.jpg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			-webkit-filter: blur(15px);
			-moz-filter: blur(15px);
			-ms-filter: blur(15px);
			-o-filter: blur(15px);
			filter: blur(15px);
			// background-attachment: fixed;
			overflow: hidden;
			.fillter-view{
				background-color: #EEEEEE;
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				opacity: 0.2;
				transition: all 0.5s;
			}
			.fillter-view.add-friend{
				background-color: $fun-theme-color;
				opacity: 0.7;
			}
		}
		.container{
			height: 100vh;
			width: 100vw;
			position: relative;
			z-index: 100;
			top: var(--status-bar-height);
			left: 0;
			
			.avatar-img.add-friend{
				width: 200rpx;
				height: 200rpx;
				left: 50rpx;
				top: -80rpx;
				margin: 300rpx 0 0 0;
				border-radius: 50%;
				image{
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
				}
			}
			.avatar-img{
				border: 4rpx #FFFFFF solid;
				width: 300rpx;
				height: 300rpx;
				border-radius: 20rpx;
				margin: 150rpx auto 0 auto;
				position: relative;
				z-index: 90;
				transition: all 0.5s;
				image{
					width: 300rpx;
					height: 300rpx;
					border-radius: 20rpx;
					// transition: all 0.5s ease-in-out;
				}
				.sexicon{
					position: absolute;
					bottom: -20rpx;
					left: 50%;
					transform: translateX(-50%);
					color: #FFF;
					font-size: 30rpx;
					border-radius: 50%;
					width: 50rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
				}
				.icon-nan{
					background-color: #3a86ff;
				}
				.icon-nv{
					background-color: #FF3F98;
				}
			}
			.nickname{
				margin-top: 50rpx;
				font-size: 40rpx;
				font-weight: bold;
				text-shadow: 1rpx 1rpx 1rpx #FFFFFF;
				letter-spacing: 15rpx;
				text-align: center;
				transition: all 0.5s;
			}
			.nickname.add-friend{
				position: relative;
				z-index: 100;
				top: -240rpx;
				left: 270rpx;
				font-weight: normal;
				letter-spacing: normal;
				font-size: 34rpx;
				color: #333333;
				text-shadow: none;
				text-align: left;
			}
			.motto-text{
				font-size: 30rpx;
				max-width: 460rpx;
				// text-shadow: 1rpx 1rpx 1rpx #FFFFFF;
				text-align: center;
				margin: 50rpx auto 0 auto;
				transition: all 0.5s;
				// 超出隐藏
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				overflow:hidden;
				/*! autoprefixer: off */
				-webkit-box-orient: vertical;
			}
			.motto-text.add-friend{
				position: relative;
				z-index: 100;
				top: -280rpx;
				left: 270rpx;
				color: #888888;
				font-size: 26rpx;
				text-align: left;
				margin: 50rpx 0 0 0;
			}
			.info-wrap{
				width: 70vw;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				margin: 50rpx auto;
				.info-item{
					width: 100;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					margin: 20rpx 0 20rpx 20rpx;
					view{
						&:last-child{
							padding-left: 15rpx;
						}
					}
				}
			}
			.add-btn{
				width: 75vw;
				height: 90rpx;
				position: absolute;
				bottom: 400rpx;
				left: 50%;
				border-radius: 10rpx;
				text-align: center;
				line-height: 90rpx;
				font-size: 30rpx;
				transform: translateX(-50%);
				z-index: 99;
				background-color: $fun-theme-color;
				color: #000000;
			}
			.add-friend-wrap.add-friend{
				top: 0;
			}
			.add-friend-wrap{
				position: absolute;
				// top: 80rpx;
				top: 100vh;
				height: 100vh;
				width: 100vw;
				left: 0;
				z-index: 10;
				border-radius: 20rpx;
				background-color: #FFF;
				// transform: translateX(-50%);
				padding-top: 210rpx;
				padding-left: 20rpx;
				transition: all 0.4s;
				box-sizing: border-box;
				.add-friend-hint{
					color: #888888;
					font-size: 26rpx;
				}
				.input-area{
					margin-bottom: 20rpx;
					textarea{
						margin-top: 20rpx;
						background-color: #F2F2F2;
						width: 710rpx;
						padding: 10rpx 20rpx;
						border-radius: 20rpx;
						font-size: 28rpx;
						height: 250rpx;
						box-sizing: border-box;
					}
				}
				.add-friend-name{
					input{
						margin-top: 20rpx;
						background-color: #F2F2F2;
						width: 710rpx;
						padding: 10rpx 20rpx;
						border-radius: 20rpx;
						font-size: 28rpx;
						height: 80rpx;
						box-sizing: border-box;
						
					}
				}
				.add-friend-btns-wrap{
					display: flex;
					width: 600rpx;
					margin: 0 auto;
					position: absolute;
					bottom: 500rpx;
					left: 50%;
					transform: translateX(-50%);
					.confirm-btn{
						background-color: $fun-theme-color;
						color: #333333;
						height: 70rpx;
						line-height: 70rpx;
						text-align: center;
						width: 460rpx;
						font-size: 30rpx;
						border-radius: 10rpx;
						margin-left: 40rpx;
					}
					.cancel-btn{
						background-color: #F2F2F2;
						color: #333333;
						height: 70rpx;
						line-height: 70rpx;
						text-align: center;
						width: 160rpx;
						font-size: 30rpx;
						border-radius: 10rpx;
					}
				}
			}
		}
		
	}
</style>
